<template>
  <div class="dropEl">
    <div class="left">
      <el-form
        ref="form"
        label-position="left"
        :rules="startRules"
        :model="data"
      >
        <el-form-item
          label="实例名"
          prop="sourceId"
          class="custom-form-item"
          label-width="90px"
          text
        >
          <el-select
            v-model="data.sourceId"
            placeholder="请选择起始实例名"
            style="width: 80%"
            @change="(v) => handelChange(v, 'start')"
          >
            <el-option
              v-for="item in datasourceInfoList.start.data"
              :key="item.id"
              :label="item.dataSourceName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        style="margin-left: 10px"
        ref="databaseStart"
        class="custom-form-item"
        :model="datasourceInfoList.start"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="主机名">
          <el-input
            disabled
            v-model="datasourceInfoList.start.ip"
            placeholder="请填写主机名"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="custom-form-item"
          label="端口"
          style="letter-spacing: 16px"
        >
          <el-input
            disabled
            v-model="datasourceInfoList.start.port"
            placeholder="请填写端口"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="用户名">
          <el-input
            disabled
            v-model="datasourceInfoList.start.uname"
            placeholder="请填写用户名"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          style="letter-spacing: 16px"
          class="custom-form-item"
          label="密码"
        >
          <el-input
            disabled
            v-model="datasourceInfoList.start.pwd"
            placeholder="请填写密码"
            style="width: 80%"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="数据库" v-show="false">
          <el-input
            disabled
            v-model="datasourceInfoList.start.databaseName"
            placeholder="请填写数据库"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="数据模式" v-show="false">
          <el-input
            disabled
            v-model="datasourceInfoList.start.schema"
            placeholder="请填写数据模式"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="url" v-show="false">
          <el-input
            disabled
            v-model="datasourceInfoList.start.url"
            placeholder="请填写url"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item class="custom-form-item" label="所有者">
          <el-input
            v-model="data.sourceOwner"
            placeholder="请填写所有者"
            style="width: 80%"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button
            v-loading="startLoading"
            style="float: right"
            :type="connectText.start"
            @click="(v) => handleConnect(v, 'start')"
            >测试连接</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <i class="el-icon-right" style="font-size: 55px; color: #555"></i>
    </div>
    <div class="right">
      <el-form ref="form" label-position="left" :rules="endRules" :model="data">
        <el-form-item
          label="实例名"
          prop="sinkId"
          class="custom-form-item"
          label-width="90px"
        >
          <el-select
            v-model="data.sinkId"
            placeholder="请选择目标实例名"
            style="width: 80%"
            @change="(v) => handelChange(v, 'end')"
          >
            <el-option
              v-for="item in datasourceInfoList.end.data"
              :key="item.id"
              :label="item.dataSourceName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        ref="databaseEnd"
        class="custom-form-item"
        :model="datasourceInfoList.end"
        label-position="left"
        label-width="80px"
        style="margin-left: 10px"
      >
        <el-form-item label="主机名">
          <el-input
            disabled
            v-model="datasourceInfoList.end.ip"
            placeholder="请填写主机名"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="custom-form-item"
          label="端口"
          style="letter-spacing: 16px"
        >
          <el-input
            disabled
            v-model="datasourceInfoList.end.port"
            placeholder="请填写端口"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="用户名">
          <el-input
            disabled
            v-model="datasourceInfoList.end.uname"
            placeholder="请填写用户名"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item
          style="letter-spacing: 16px"
          class="custom-form-item"
          label="密码"
        >
          <el-input
            disabled
            v-model="datasourceInfoList.end.pwd"
            placeholder="请填写密码"
            style="width: 80%"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="数据库" v-show="false">
          <el-input
            disabled
            v-model="datasourceInfoList.end.databaseName"
            placeholder="请填写数据库"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="数据模式" v-show="false">
          <el-input
            disabled
            v-model="datasourceInfoList.end.schema"
            placeholder="请填写数据模式"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item class="custom-form-item" label="url" v-show="false">
          <el-input
            disabled
            v-model="datasourceInfoList.end.url"
            placeholder="请填写url"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item class="custom-form-item" label="所有者">
          <el-input
            v-model="data.sinkOwner"
            placeholder="请填写所有者"
            style="width: 80%"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button
            v-loading="endLoading"
            style="float: right"
            :type="connectText.end"
            @click="(v) => handleConnect(v, 'end')"
            >测试连接</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { listDatasourceInfo } from "@/api/console/datasourceInfo";
import { connectTestDatabase } from "@/api/console/tasks.js";
import Vue from "vue";

export default {
  dicts: ["data_base_type", "synchronous_exceptionhandling"],
  components: {},
  props: ["data"],
  data() {
    return {
      startRules: {
        sourceId: [
          { required: true, message: "请选择数据源", trigger: "change" },
        ],
      },
      endRules: {
        sinkId: [
          { required: true, message: "请选择数据源", trigger: "change" },
        ],
      },
      datasourceInfoList: {
        start: {
          data: [],
          ip: "",
          pwd: "",
          port: "",
          uname: "",
          schema: "",
          databaseName: "",
          url: "",
        },
        end: {
          data: [],
          ip: "",
          pwd: "",
          port: "",
          uname: "",
          schema: "",
          databaseName: "",
          url: "",
        },
      },
      connectText: {
        start: "primary",
        end: "primary",
      },
      startLoading: false,
      endLoading: false,
    };
  },
  async created() {
    let that = this;
    const dictItem = await this.getDicts("database_datatype");
    const example = dictItem.data.filter((f) => f.dictLabel == "实例");
    const sourceInfo = {
      type: that.$props.data.start,
      dataType: example[0].dictValue,
      startNum: 0,
      pgSize: 999,
    };
    let sourceData = await listDatasourceInfo(sourceInfo);
    this.datasourceInfoList.start.data = sourceData.rows;
    sourceInfo.type = that.$props.data.end;
    let sinkData = await listDatasourceInfo(sourceInfo);
    this.datasourceInfoList.end.data = sinkData.rows;
    this.datasourceInfoList.start = {
      data: sourceData.rows,
      ...this.findItem(sourceData.rows, this.$props.data.sourceId),
    };
    this.datasourceInfoList.end = {
      data: sinkData.rows,
      ...this.findItem(sinkData.rows, this.$props.data.sinkId),
    };
    return false;
  },
  methods: {
    findItem(list, id) {
      return list.find((f) => f.id == id);
    },
    onSubmit() {
    },
    handleConnect(_v, v) {
      if (!this.$props.data[v == "start" ? "sourceId" : "sinkId"]) {
        return this.$message({
          message: `请选择${v == "start" ? "起始" : "目标"}实例名`,
          type: "warning",
        });
      }
      this[`${v}Loading`] = true;
      let data = this.datasourceInfoList[`${v}`];
      delete data.data;
      connectTestDatabase(this.datasourceInfoList[`${v}`])
        .then((res) => {
          this[`${v}Loading`] = false;
          if (res.data.code == 200) {
            this.connectText[v] = "success";
            this.$message.success(res.msg);
          } else {
            this.connectText[v] = "danger";
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          this[`${v}Loading`] = false;
          this.connectText[v] = "danger";
        });
    },
    handelChange(_v, v) {
      let that = this;
      let data = this.findData(this.datasourceInfoList[`${v}`].data, _v);
      this.$props.data[v == "start" ? "sourceName" : "sinkName"] =
        data.dataSourceName;
      this.datasourceInfoList[`${v}`] = {
        data: that.datasourceInfoList[`${v}`].data,
        ...data,
      };

      Vue.set(
        this.$props.data,
        `${v == "start" ? "sourceOwner" : "sinkOwner"}`,
        !this.$props.data[v == "start" ? "sourceOwner" : "sinkOwner"]
          ? data.uname
          : this.$props.data[v == "start" ? "sourceOwner" : "sinkOwner"]
      );
    },
    findData(v, id) {
      return v.find((v) => v.id == id);
    },
  },
};
</script>

<style lang="scss" scoped>
.dropEl {
  width: 100%;
  margin: 30px auto;
  border: 1px solid #dcdfe6;
  //   padding: 40px;
  display: flex;

  .left,
  .right {
    width: 40%;
    padding: 40px 40px;
    margin: 0 auto;
  }
  .content {
    width: 20%;
    border-left: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.el-col-1 {
  margin-top: 5px !important;
}
</style>
